<template>
    <div class="main">
        <!-- 表格 -->
        <common-table
            :table="table"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
            ref="common-table"
        ></common-table>

        <!-- 新增、编辑 -->
        <dialog-add-or-update ref="addOrUpdate"></dialog-add-or-update>
    </div>
</template>

<script>
import { getCurrentInstance, reactive, toRefs } from 'vue';
import { adminLink as Api } from 'api';
import DialogAddOrUpdate from './add-or-update.vue';

export default {
    components: {
        DialogAddOrUpdate
    },
    setup() {
        const { proxy } = getCurrentInstance();
        // 表格
        let table = reactive({
            // 表格列配置
            loading: false, // 加载动画(可选)
            selection: false, // 开启全选<增加勾选列>(可选)
            sort: false, // 开启输入排序<增加输入排序列>(可选)
            stripe: true, // 是否为斑马纹 table(可选)
            border: true, // 是否带有纵向边框(可选)
            fit: true, // 列的宽度是否自撑开(可选,默认true)
            showHead: true, // 是否显示表头(可选,默认true)
            highlight: false, // 是否要高亮当前行(可选,默认false)
            size: 'default', // Table 的尺寸(可选,默认default)<值：large / default /small>
            // 表格列(必选)
            col: [
                // prop(必选),
                // label(必选),
                // width(可选),
                // align(可选)<值：left / center / right>,
                // type(可选)<值：tag / popover / date><type="tag"时需要使用formatter方法>,
                // formatter(可选)<选择该项时 type="tag"显示标签样式 >
                { prop: 'id', label: 'ID', width: 80, align: 'center' },
                { prop: 'title', label: '网站名', width: 180 },
                { prop: 'url', label: '网站链接', width: 180 },
                {
                    prop: 'image_url',
                    label: 'LOGO',
                    width: 120,
                    align: 'center',
                    type: 'popover'
                },
                { prop: 'desc', label: '描述' },
                { prop: 'email', label: '联系邮箱' },
                {
                    prop: 'display',
                    label: '是否显示',
                    width: 100,
                    align: 'center',
                    type: 'tag',
                    formatter: (row, type) => {
                        return type
                            ? row.display == 1
                                ? ''
                                : 'warning'
                            : row.display == 1
                            ? '是'
                            : '否';
                    }
                },
                { prop: 'created_time', label: '创建时间', width: 180, type: 'date' }
            ],
            // 数据列表(必选)
            list: [],
            // 头部操作按钮(可选)
            headBtn: [
                {
                    type: 'primary',
                    icon: 'add',
                    label: '新增',
                    auth: proxy.isAuth('FRD_LINK_ADD'),
                    click: () => onAddOrUpdate()
                }
            ],
            // 表格列操作按钮(可选)
            colBtn: {
                width: proxy.$defaultActionWidth, // 操作列宽(可选)
                data: [
                    {
                        type: 'primary',
                        icon: 'edit',
                        label: '编辑',
                        auth: proxy.isAuth('FRD_LINK_UPDATE'),
                        click: (row) => onAddOrUpdate(row.id)
                    },
                    {
                        type: 'danger',
                        icon: 'del',
                        label: '删除',
                        auth: proxy.isAuth('FRD_LINK_DEL'),
                        click: (row) => onDel(row.id)
                    }
                ]
            },
            // 分页(可选)
            paging: {
                currentPage: proxy.$config.pagination.currentPage, // 当前第几页(必选)
                pageSize: proxy.$config.pagination.pageSize, // 每页多少条(必选)
                pageSizes: proxy.$config.pagination.pageSizes, // 每页显示个数下拉选择器的选项设置(必选)
                layout: proxy.$config.pagination.layout, // 组件布局，子组件名用逗号分隔(必选)
                total: 0 // 总条数(必选)
            }
        });

        // 获取列表
        const getList = async () => {
            const { code, data } = await proxy.$http.get(Api.getList, {
                params: {
                    page: table.paging.currentPage, //查询第几页
                    per_page: table.paging.pageSize //每页多少条数据
                }
            });

            if (code === 200) {
                table.list = data.list;
                table.paging.total = data.total;
                // 关闭提示
                table.loading = false;
            }
        };
        getList();

        // 删除
        const onDel = async (id) => {
            // 确认删除
            const confirm = await proxy.$msgBox.confirm({
                cancel: true
            });

            if (confirm) {
                const { code, data, msg } = await proxy.$http.delete(Api.del, {
                    data: { id }
                });

                if (code === 200) {
                    proxy.$msg.success(msg);
                    getList();
                } else {
                    proxy.$msg.error(msg ? msg : data);
                }
            }
        };
        // 新增、编辑
        const onAddOrUpdate = (id) => {
            proxy.$refs.addOrUpdate.id = id;
            proxy.$refs.addOrUpdate.visible = true; // 弹窗开关
        };
        // 每页多少条
        const handleSizeChange = (val) => {
            table.loading = true;
            table.pageSize = val;
            getList();
        };
        // 当前页
        const handleCurrentChange = (val) => {
            table.loading = true;
            table.pageSize = val;
            getList();
        };

        return {
            table,
            onAddOrUpdate,
            handleSizeChange,
            handleCurrentChange,
            getList
        };
    }
};
</script>
